<template>
	<view class="sup-list-box">
		<view class="search-box">
			<!-- <u--input placeholder="搜索" border="surround" v-model="searchVal"
				shape='circle' inputAlign='center'
				suffixIcon='search' suffixIconStyle="font-size: 20px;color:#7B77FE" autoface @confirm="searchConfirm"></u--input> -->
				<u-search placeholder="请输入内容" v-model="searchVal" :clearabled="true" :showAction="true" borderColor="#e1e1e1"  searchIconSize="28" bgColor="white" height="70" actionText="搜索"  @search="searchConfirm" @custom="searchConfirm" @clear="searchClear"></u-search>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"  @scrolltolower="lower">
			<view class="sup-item-box">
				<view class="sup-list" v-for="(item,index) in supplyArr" :key="index" @click="supListClick(item,index)">
					<view class="sup-box" >
						<!-- <view class="mark-collection" @click.stop="collectMethod(item,index)">
							<img :src="item.collec==true?'https://file.casugn.com/storecompcard//SN06wSmIGOcDd8b69c3a90418f3f6b9b5dff07868524_1662362664042.png':'https://file.casugn.com/storecompcard//6O228HBtk3wRe440b1cca46aba4f3db8280d67901c74_1662341362856.png'" alt="">
						</view> -->
						<view class="sup-img">
							<img :src="item.imageList[0]" alt="">
						</view>
						<view class="sup-info">
							<view class="sup-info-title">
								{{item.name}}
							</view>
							<view class="sup-info-cont">
								<text class="sup-info-cont1">￥</text>
								<text class="sup-info-cont2">{{item.price}}</text>
								<text class="sup-info-cont3">{{item.city}}</text>
							</view>
						</view>
					</view>
					<view class="sup-btm">
						产品规格：{{item.specs}}
					</view>
				</view>
			</view>
				
		</scroll-view>
		
			
	
	</view>
</template>

<script>
	export default {
		// props:{
		// 	supplyArr: {
		// 		type: Array,
		// 		default () {
		// 			return [] //['gif']
		// 		}
		// 	},
		// },
		data() {
			return {
				openId: '', //门店id
				pageNo: 1,
				pageSize: 10,
				total:0,
				searchVal:'',
				supplyArr:[]
			};
		},
		mounted(){
			this.getSupplyLists()
		},
		methods:{
			searchConfirm(val){
				console.log(val)
				// this.$emit("searchMethod",val)
				this.supplyArr=[]
				this.total=0
				this.pageNo=1
				this.searchVal=val
				let openId = uni.getStorageSync('openId')
				console.log("openId", openId)
				this.openId=openId.openid
				let data={
					pageNo: this.pageNo,
					pageSize: 10,
					name:this.searchVal
				}
				this.$api.queryMySupplyLists(data).then(res => {
					console.log(res)
					if(res.success){
						res.result.records.forEach(item=>{
							item.imageList=item.imageList.split(',')
						})
						this.supplyArr=res.result.records
						this.total = res.result.total
					}
				})
			},
			searchClear(){
				this.supplyArr=[]
				this.total=0
				this.pageNo=1
				this.searchVal=''
				let openId = uni.getStorageSync('openId')
				console.log("openId", openId)
				this.openId=openId.openid
				let data={
					pageNo: this.pageNo,
					pageSize: 10,
					name:this.searchVal
				}
				this.$api.queryMySupplyLists(data).then(res => {
					console.log(res)
					if(res.success){
						res.result.records.forEach(item=>{
							item.imageList=item.imageList.split(',')
						})
						this.supplyArr=res.result.records
						this.total = res.result.total
					}
				})
			},
			lower(){
				// console.log(1)
				console.log("找供应")
				if (this.pageNo * 10 > this.total) {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				}
				this.pageNo++
				this.getSupplyLists()
			},
			// 找供应
			getSupplyLists(){
				let data={
					pageNo: this.pageNo,
					pageSize: 10,
				}
				this.$api.queryMySupplyLists(data).then(res => {
					console.log(res)
					
					if(res.success){
						res.result.records.forEach(item=>{
							item.imageList=item.imageList.split(',')
						})
						this.supplyArr=[...this.supplyArr, ...res.result.records]
						this.total = res.result.total
					}
				})
			},
			supListClick(item,index){
				console.log(item,index)
				uni.setStorageSync('pageSupplyId', item.id)
				uni.navigateTo({
					url: '/pagesBusiness/marketSupplyInfo/marketSupplyInfo'
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page,.sup-list-box{
		height: 100vh;
		
	}
	.sup-list-box{
		width: 100%;
		.search-box{
			padding: 20upx;
		}
		.scroll-Y{
			height: 100vh;
			width: 100%;
			
			.sup-item-box{
				display: flex;
				flex-wrap: wrap;
				.sup-list{
					width: 340upx;
					// background: red;
					// width: 40%;
					border-bottom: 1px solid #f4f4f4;
					padding: 15upx;
					margin-left: 5upx;
					.sup-box{
						// display: flex;
						position: relative;
						.mark-collection{
							position: absolute;
							right: 10upx;
							top: 150upx;
							width: 60upx;
							height: 60upx;
							img{
								width: 60upx;
								height: 60upx;
							}
						}
						.sup-img{
							width: 340upx;
							height: 340upx;
							margin: 0 auto;
							img{
								width: 340upx;
								height: 340upx;
								border-radius: 10upx ;
							}
						}
						.sup-info{
							// margin-left: 20upx;
							text-align: left;
							.sup-info-title{
								// height: 90upx;
								// background: red;
								font-size: 30upx;
								text-align: left;
								margin-top: 20upx;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								align-content: center;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}
							.sup-info-cont{
								margin-top: 20upx;
								.sup-info-cont1,.sup-info-cont2{
									color: #ff8802;
									font-size: 30upx;
								}
								.sup-info-cont3{
									margin-left: 30upx;
									font-size: 30upx;
								}
							}
						}
					}
					.sup-btm{
						margin-top: 20upx;
						color: #99a1a9;
						font-size: 26upx;
						text-align: left;
					}
				}

			}
			
		}
		
	}
	
</style>
